<script setup>
import { ref } from 'vue'

const welcomeText = ref('欢迎使用 SA-Vue Admin 系统')
</script>

<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <!-- 欢迎卡片 -->
      <el-col :span="24">
        <el-card class="welcome-card">
          <template #header>
            <div class="card-header">
              <span>{{ welcomeText }}</span>
            </div>
          </template>
          <div class="card-content">
            <p>这是一个基于 Vue 3 + Element Plus + Sa-Token 的前后端分离管理系统模板</p>
            <p>你可以基于此模板快速开发你的业务系统</p>
          </div>
        </el-card>
      </el-col>

      <!-- 数据统计卡片 -->
      <el-col :span="6">
        <el-card class="data-card">
          <div class="data-item">
            <div class="data-title">用户总数</div>
            <div class="data-value">1,236</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="data-card">
          <div class="data-item">
            <div class="data-title">今日访问</div>
            <div class="data-value">423</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="data-card">
          <div class="data-item">
            <div class="data-title">系统消息</div>
            <div class="data-value">12</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="data-card">
          <div class="data-item">
            <div class="data-title">待办事项</div>
            <div class="data-value">5</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
.dashboard-container {
  .el-row {
    margin-bottom: 20px;
  }

  .welcome-card {
    margin-bottom: 20px;

    .card-header {
      font-size: 18px;
      font-weight: bold;
    }

    .card-content {
      color: #666;
      line-height: 1.8;
    }
  }

  .data-card {
    .data-item {
      text-align: center;
      padding: 20px 0;

      .data-title {
        font-size: 14px;
        color: #999;
        margin-bottom: 10px;
      }

      .data-value {
        font-size: 24px;
        font-weight: bold;
        color: #409eff;
      }
    }
  }
}
</style>